/* 声明全局属性 */
:root {
  --blue: #2980b9;
  --black: #333;
  --white: #fff;
  --light-color: #777;
  --light-bg: #eee;
  /* 盒子阴影 */
  --box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

/* 设置页面元素的默认样式 */
* {
  /* 字体系列 */
  font-family: "Microsoft YaHei", sans-serif;
  /* 清除元素默认内外边距 */
  margin: 0;
  padding: 0;
  /* 自动内减:防止设置边框和内边距的时候撑大盒子 */
  box-sizing: border-box;
  /* 去掉轮廓:一般用于清除input标签的轮廓 */
  outline: none;
  /* 去掉边框 */
  border: none;
  /* 去掉下划线 */
  text-decoration: none;
  /* 可以将文本中的每一个单词的首字母大写(根据情况选择) */
  text-transform: capitalize;
  /* 过渡效果 */
  transition: all 0.2s linear;
}

/* 设置滚动条整体部分样式 */
html::-webkit-scrollbar {
  width: 10px;
}

/* 设置滚动条的轨道样式 */
html::-webkit-scrollbar-track {
  background: var(--blue);
}

/* 设置滚动条里面的上下移动小方块的样式 */
html::-webkit-scrollbar-thumb {
  background: var(--white);
  border-radius: 50px;
}

/* ===========设置通用样式属性====================== */
.title{
  font-size: 25px;
  color: var(--blue);
  margin-bottom: 15px;
}


/* ============设置main主体容器的样式================= */
.container{

  /* 开启flex布局 */
  display: flex;
  
  /* 宽度:无需设置,通栏的效果,默认跟body一样宽 */

  /* 高度:先设置一个初始高度,便于查看效果,后期会注释掉,使用内容撑开 */
  /* height: 1000px; */

  /* 背景:渐变 */
  background: linear-gradient(45deg,deeppink,var(--blue));

  /* 设置内边距 */
  padding: 100px 10%;
}

/*============ 设置左侧个人概要样式 ====================*/
.container .profile{
  /* 设置粘性定位 */
  position: sticky;
  top:20px;

  /* 设置宽度 */
  flex: 400px;

  /* 高度:先给初始值,方便调试,后期会注释掉,由内容撑开 */
  /* height: 400px; */

  /* 高度注释之后,flex子项会默认拉伸,设置顶部对齐 */
  align-self: flex-start;

  background: var(--white);

  /* 设置右边框 */
  border-right: 2px solid var(--black);

  /* 设置内边距:约束边框和内容之间的间隙 */
  padding: 20px 30px;

  text-align: center;
}

.profile img{
  width: 150px;
  height: 150px;
  border: 2px solid var(--black);
  border-radius: 50%;

  object-fit: cover;/* 保证原有比较的裁切 */
  object-fit: contain;/* 保证原有比较的缩放 */
}

.profile h3{
  margin-top: 10px;
  color: var(--black);
}

.profile p{
  /* 使用padding和margin都可以产生间隙,这里使用padding来设置 */
  padding: 5px 0;/* 这里盒子会被撑大,因为上下没有多余的空间来自动内减 */
  color: var(--blue);
  font-size: 15px;
}

.profile .share{
  margin: 10px 0;
}

.profile .share a{
  width: 50px;
  height: 50px;
  background: var(--light-bg);
  color: var(--black);
  line-height: 50px;
  font-size: 20px;
  border-radius: 50%;
}

.profile .share a:hover{
  background: var(--blue);
  color: var(--white);
  box-shadow: var(--box-shadow);
}

.profile .btn{
  /* 最好使用行内块布局,将来就可以使用父元素profile的text-align属性来居中 */
  display: inline-block;
  /* 使用padding也可以设置宽高,好处:无需设置水平和垂直居中 */
  padding: 7px 20px;
  background: var(--blue);
  margin-top: 10px;
  color: var(--white);
  border-radius: 5px;
  box-shadow: var(--box-shadow);
}

.profile .btn:hover{
  background: var(--black);
}

/*============ 设置右侧详细信息样式 ====================*/
.container .information{
  /* 设置宽度 */
  flex: 1000px;

  /* 高度:先给初始值,方便调试,后期会注释掉,由内容撑开 */
  /* height: 800px; */

  background: var(--white);

  /* 设置内边距:约束边框和内容之间的间隙 */
  padding: 20px 30px;
}

/* ==========设置个人介绍模块样式=================== */
.information .about p{
  font-size: 17px;
  color: var(--light-color);
  line-height: 2;
}

/* 对外面的box-container开启flex布局(box-container就是为了flex布局,不用写宽高等样式) */
.information .about .box-container{
  display: flex;
  gap: 15px;
  flex-wrap: wrap;/* 需要加上换行,当父控件空间不够的时候,会自动换行 */
}

.information .about .box-container .box{
  flex:300px;
}

.information .about .box-container .box h3{
  padding: 10px 0;
  color: var(--black);
  font-size: 15px;
}

.information .about .box-container .box span{
  color: var(--light-color);
}

/* ==========设置技术栈模块样式=================== */
.information .services{
  /* 使用padding设置间隙也是可以的 */
  margin-top: 20px;
}

.information .services .box-container{
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.information .services .box-container .box{
  flex: 100px;
  background: var(--light-bg);
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

.information .services .box-container .box img{
  /* 只需要设置高度,宽度会等比例缩放 */
  height: 50px;
  margin-bottom: 10px;
}

.information .services .box-container .box h3{
  font-size: 20px;
  color: var(--light-color);
}

/* ==========设置技术熟练度模块样式=================== */
.information .skills{
  /* 使用padding设置间隙也是可以的 */
  margin-top: 20px;
}

.information .skills .box-container{
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.information .skills .box-container .box{
  flex: 300px;
}

.information .skills .box-container .progress h3{
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  color: var(--black);
  font-size: 15px;
}

.information .skills .box-container .progress span{
  color: var(--light-color);
}

.information .skills .box-container .progress .outer{
  height: 10px;
  background: var(--light-bg);
  border-radius: 5px;
}

.information .skills .box-container .progress .inner{
  height: 10px;
  background: var(--blue);
  border-radius: 5px;
}

/* ==========设置学习工作经历模块样式=================== */
.information .experience{
  /* 使用padding设置间隙也是可以的 */
  margin-top: 20px;
}

.information .experience .box-container{
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.information .experience .box-container .box{
  flex: 300px;
  background: var(--light-bg);
  padding: 20px;
  border-radius: 5px;
}

.information .experience .box span{
  color: var(--blue);
}

.information .experience .box h3{
  padding: 5px 0;
  color: var(--black);
  font-size: 17px;
}

.information .experience .box p{
  color: var(--light-color);
  font-size: 13px;
  line-height: 2;
}

/* ==========设置联系方式模块样式=================== */
.information .contact{
  /* 使用padding设置间隙也是可以的 */
  margin-top: 20px;
}

.information .contact .box-container{
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.information .contact .box-container .box{
  display: flex;
  gap: 15px;

  flex: 200px;
}

.information .contact .box-container .box i{
  width: 40px;
  height: 40px;
  background: var(--blue);
  color: var(--white);
  font-size: 15px;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
}

.information .contact .box-container .box h3{
  color: var(--black);
  font-size: 17px;
  margin-bottom: 5px;
}

.information .contact .box-container .box p{
  color: var(--light-color);
  font-size: 14px;
}

/* =================媒体查询============= */
/* 不超过1200px下的样式 */
@media(max-width:1200px){
  .container{
    flex-direction: column;
    padding: 20px;
  }

  .container .profile{
    /* 恢复到之前的定位-没有定位-position:static */
    position: static;

    /* 设置profile居中:方式一:使用marin */
    /* margin: 0 auto; */
    /* 设置profile居中:方式二:使用flex */
    /* 现在已经更改了轴向,水平方向是侧轴,侧轴某一个元素居中,使用align-self */
    align-self: center;

    /* 由于更改了轴向,以前flex的初始宽度400px就变成了高度,需要重新根据内容来设置 */
    flex: auto;

    margin-bottom: 20px;
    border-right: none;
    border-radius: 5px;
    box-shadow: var(--box-shadow);
  }
}

/* 不超过600px下的样式 */
@media(max-width:600px){
  .container .profile{
     /* 设置宽度方式一:百分比 */
     /* width: 100%; */

     /* 设置宽度方式二:flex侧轴某个元素拉伸 */
     align-self: stretch;
  }

  .container .profile .btn{
    width: 100%;
  }
  
  .container .information .about p{
    font-size: 12px;
  }

  .container .information .experience p{
    font-size: 12px;
  }
}